<!--
 * @description 组件
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
-->
<template>
	<view
		class="pure-picker"
		:class="_classes"
		:style="_styles"
	>
		<pure-popup
			:title="title"
			:show="show"
			:mask="mask"
			direction="bottom"
			:showClose="false"
			:maskClickable="maskClickable"
			:showNot="showNot"
			:notText="notText"
			:notTheme="notTheme"
			:notOpts="notOpts"
			:showOk="showOk"
			:okText="okText"
			:okTheme="okTheme"
			:okOpts="okOpts"
			:showCancel="showCancel"
			:cancelText="cancelText"
			:cancelTheme="cancelTheme"
			:cancelOpts="cancelOpts"
			:showConfirm="showConfirm"
			:confirmText="confirmText"
			:confirmTheme="confirmTheme"
			:confirmOpts="confirmOpts"
			:scrollable="scrollable"
			:headerLine="headerLine"
			:footerLine="footerLine"
			:buttonLine="buttonLine"
			:width="width"
			:height="height"
			:maxWidth="maxWidth"
			:maxHeight="maxHeight"
			@onConfirm="_handleConfirm"
			@onCancel="_handleCancel"
			@onClose="_handleClose"
			@onNot="_handleNot"
			@onOk="_handleOk"
		>
			<picker-view
				class="pure-picker__view"
				:value="_indexes"
				@change="_handleChange"
				:indicator-style="_indicatorStyles"
				@tap.stop
				@click.stop
			>
				<picker-view-column
					class="pure-picker__column"
					v-for="(col, colIdx) in _columns"
					:key="colIdx"
				>
					<view
						class="pure-picker__column__item pure-line-1"
						v-for="(item, itemIdx) in col"
						:key="itemIdx"
						>{{ item?.[labelKey] }}</view
					>
				</picker-view-column>
			</picker-view>
		</pure-popup>
	</view>
</template>

<script>
	import commonComponentOptions from "../../config/options";
	export default {
		options: commonComponentOptions
	};
</script>

<script setup>
	import { ref, computed, onMounted, watch } from "vue";
	import props from "./props";

	// 选择器下标
	const _indexes = ref([]);

	// -------------------------------------------------------------------------------- Props
	const _props = defineProps(props);

	// -------------------------------------------------------------------------------- Emits
	const _emits = defineEmits(["onClose", "onConfirm", "onCancel", "onNot", "onOk", "onChange"]);

	// -------------------------------------------------------------------------------- Classes
	const _classes = computed(() => {
		const array = [];
		return array;
	});

	// -------------------------------------------------------------------------------- Styles
	const _styles = computed(() => {
		const array = [];

		// 行高度
		if (_props.rowHeight) array.push(`--pure-picker-row-height: ${_props.rowHeight}`);

		// 显示的行数
		if (_props.rows) array.push(`--pure-picker-rows: ${_props.rows}`);

		return array;
	});

	// 指示器的高度
	const _indicatorStyles = computed(() => {
		return `height: ${_props.rowHeight};`;
	});

	// 判断是通过 values 还是 indexes 绑定的选中项
	const _isValues = computed(() => {
		return _props.values !== undefined;
	});

	// 监听显示状态
	watch(
		() => _props.show,
		(newVal) => {
			if (newVal) {
				// 每次显示设置默认下标
				_indexes.value = _fillDefaultIndexes();
			}
		}
	);

	onMounted(() => {
		// 设置默认下标
		_indexes.value = _fillDefaultIndexes();
	});

	// 列数据
	const _columns = computed(() => {
		if (_props?.dataMode === "children") return _getColumnsByChildren();
		return _getColumnsByLists();
	});

	// 确认按钮点击事件
	function _handleConfirm() {
		_emits("onConfirm", _indexes.value, _getSelectedItems());
	}

	// 取消按钮点击事件
	function _handleCancel() {
		_emits("onCancel");
	}

	// 关闭按钮点击事件
	function _handleClose() {
		_emits("onClose");
	}

	// Header 右侧按钮点击事件
	function _handleOk() {
		_emits("onOk", _indexes.value, _getSelectedItems());
	}

	// Header 左侧按钮点击事件
	function _handleNot() {
		_emits("onNot");
	}

	// 选择器改变事件
	function _handleChange(e) {
		_indexes.value = e.detail.value;
		_emits("onChange", e.detail.value, _getSelectedItems());
	}

	// 获取 lists 模式下的列数据
	function _getColumnsByLists() {
		const columns = _props?.list.slice(0, _props.cols);
		return columns;
	}

	// 获取 children 模式下的列数据
	function _getColumnsByChildren() {
		const indexes = _indexes.value;
		const cols = [];

		indexes.forEach((indexValue, indexCurrent) => {
			if (indexCurrent === 0) {
				cols.push(_props.list || []);
			} else {
				const parentList = cols[indexCurrent - 1] || [];
				const parentIndex = indexes[indexCurrent - 1] || 0;
				const parentItem = parentList[parentIndex] || {};
				const children = parentItem?.[_props.childrenKey] || [];
				cols.push(children);
			}
		});

		return cols;
	}

	// 设置默认下标
	function _fillDefaultIndexes() {
		if (!_isValues.value) return _fillDefaultIndexesByIndexes();
		return _fillDefaultIndexesByValues();
	}

	// 通过 indexes 设置默认下标数据
	function _fillDefaultIndexesByIndexes() {
		const indexes = [];
		for (let i = 0; i < _props.cols; i++) {
			indexes.push(_props.indexes?.[i] || 0);
		}
		return indexes;
	}

	// 通过 values 值设置默认下标数据
	function _fillDefaultIndexesByValues() {
		if (_props?.dataMode === "children") return _fillDefaultIndexesByValuesByChildren();
		return _fillDefaultIndexesByValuesByLists();
	}

	// 通过 lists & values 模式设置默认下标数据
	function _fillDefaultIndexesByValuesByLists() {
		const indexes = [];
		const values = _props.values;
		const lists = _props.list;

		for (let i = 0; i < _props.cols; i++) {
			const items = lists?.[i] || [];
			const value = values?.[i];
			if (value === undefined) {
				indexes.push(0);
				break;
			}
			const index = items.findIndex((item) => {
				return item?.[_props.valueKey] === value;
			});
			if (index === -1) {
				indexes.push(0);
				break;
			}
			indexes.push(index);
		}

		return indexes;
	}

	// 通过 children & values 模式设置默认下标数据
	function _fillDefaultIndexesByValuesByChildren() {
		const indexes = [];
		const values = _props.values;
		let children = _props?.list || [];
		for (let i = 0; i < _props.cols; i++) {
			const value = values?.[i];
			if (value === undefined) {
				indexes.push(0);
				children = [];
			} else {
				const index = children.findIndex((item) => {
					return item?.[_props.valueKey] === value;
				});
				if (index === -1) {
					indexes.push(0);
					break;
				}
				indexes.push(index);
				children = children[index]?.[_props.childrenKey] || [];
			}
		}

		return indexes;
	}

	// 获取选择项数据
	function _getSelectedItems() {
		const indexes = _indexes.value;
		const columns = _columns.value;
		const items = [];
		indexes.forEach((indexValue, indexCurrent) => {
			const column = columns[indexCurrent];
			const item = column[indexValue];
			items.push(item);
		});
		return items;
	}
</script>

<style scoped lang="scss">
	@import "./style.scss";
</style>
